<template>
    <div id="logs-main">
        <div class="logs-herd">
            <el-form :inline="true" :model="paging" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="paging.userName" placeholder="用户名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="paging.userId" placeholder="用户ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="paging.model" placeholder="模块名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="paging.operate" placeholder="操作名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="消耗时间(毫秒)" v-model="paging.consumingTime" class="input-with-select">
                        <el-select v-model="paging.consumingType" slot="prepend" placeholder="消耗时间类型">
                            <el-option label="大于" value="1"></el-option>
                            <el-option label="大于等于" value="2"></el-option>
                            <el-option label="等于" value="3"></el-option>
                            <el-option label="小于" value="4"></el-option>
                            <el-option label="小于等于" value="5"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="operateTimeLong" type="datetimerange" value-format="timestamp" range-separator="至"
                        start-placeholder="操作结束时间" end-placeholder="操作开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onReSetSeach">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="init">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="logs-body">
            <el-table ref="multipleTable" tooltip-effect="dark" :data="pagingData.totalList" style="width: 100%">
                <el-table-column prop="id" label="id" width="180"></el-table-column>
                <el-table-column prop="userName" label="用户名称" width="180" align="center"></el-table-column>
                <el-table-column prop="module" label="模块名称" width="180" align="center"></el-table-column>
                <el-table-column prop="operate" label="操作名称" width="180" align="center"></el-table-column>
                <el-table-column prop="requestIp" label="请求IP" width="180" align="center"></el-table-column>
                <el-table-column prop="requestUri" label="请求API" width="180" align="center"></el-table-column>
                <el-table-column prop="operateTime" label="操作时间" width="180" align="center">
                    <template slot-scope="scope">
                        {{ formatLongToStr(scope.row.operateTime) }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small"
                            style="color: #67c23a;">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="pagingData && pagingData.totalList && pagingData.totalList.length > 0">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pagingData.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="pagingData.total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="日志详情" :visible.sync="dialogTableViewVisible">
            <el-form :model="viewVO" ref="viewVO">
                <el-form-item label="角色名称" prop="nickName" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.nickName" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户ID" prop="userId" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.userId" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="userName" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.userName" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="模块名" prop="module" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.module" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="操作名" prop="operate" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.operate" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求IP" prop="requestIp" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.requestIp" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求API" prop="requestUri" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.requestUri" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="操作时间" prop="operateTime" :label-width="formLabelWidth">
                    <el-input :value="formatLongToStr(viewVO.operateTime)" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求方法名" prop="actionMethod" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.actionMethod" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求类路径" prop="classPath" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.classPath" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求参数" prop="params" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.params" type="textarea" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求结果" prop="result" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.result" type="textarea" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求方法" prop="httpMethod" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.httpMethod" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请求时间" prop="startTime" :label-width="formLabelWidth">
                    <el-input :value="formatLongToStr(viewVO.startTime)" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="响应时间" prop="finishTime" :label-width="formLabelWidth">
                    <el-input :value="formatLongToStr(viewVO.finishTime)" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="消耗时间" prop="consumingTime" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.consumingTime" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="操作类型" prop="type" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.type" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="API描述信息" prop="description" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.description" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="异常描述" prop="exDesc" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.exDesc" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="异常对象" prop="exDetail" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.exDetail" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="其他描述信息" prop="content" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.content" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="浏览器标识" prop="ua" :label-width="formLabelWidth">
                    <el-input v-model="viewVO.ua" type="textarea" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableViewVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { CREATE, UPDATE, DELETE } from "@/common/constant/Const";
import { getSecondStr, isSysDef } from "@/common/utils/strUtil";
import { formatLongToStr, formatLongToISO } from "@/common/utils/formatTime";
import { logListPaging } from "@/common/api/log";
export default {
    components: {
    },
    data() {
        return {
            seachForm: {},
            paging: {
                currentPage: 1,
                pageSize: 10,
            },
            pagingData: {},
            viewVO: {},
            dialogTableViewVisible: false,
            formLabelWidth: "120px",
            operateTimeLong: [],
        };
    },
    mounted() {
        this.init();
    },
    computed: {
    },
    watch: {
        operateTimeLong(val) {
            if (val && val.length > 0) {
                this.paging.operateStartTimeLong = val[0];
                this.paging.operateEndTimeLong = val[1];
            } else {
                this.paging.operateStartTimeLong = '';
                this.paging.operateEndTimeLong = '';
            }
        }
    },
    methods: {
        formatLongToStr,
        formatLongToISO,
        init() {
            logListPaging(this.paging).then((resp) => {
                this.pagingData = resp.data;
            });
        },
        handleSizeChange(val) {
            this.paging.pageSize = val;
            this.init();
        },
        handleCurrentChange(val) {
            this.paging.currentPage = val;
            this.init();
        },
        handleClick(data) {
            this.viewVO = data;
            this.dialogTableViewVisible = true;
        },
        onReSetSeach() {
            this.paging = {
                currentPage: 1,
                pageSize: 10,
            };
            this.init();
        },
    },
};
</script>
<style lang="less" scoped>
#logs-main::v-deep {
    .el-select .el-input {
        width: 130px;
    }
}
</style>